<template>
  <ul class="footer flex jc-sa w100pc fixed bott0 bg-fff aic footer">
    <li>
      <router-link to="/index" class="flex2 aic f20 yellow" :class="{active: page==='index'}">
        <van-icon name="wap-home"></van-icon>
        <p class="mt-5 f14">首页</p>
      </router-link>
    </li>
    <li>
      <router-link to="/cart" class="flex2 aic f20 gray" :class="{active: page==='cart'}">
        <van-icon name="shopping-cart-o"></van-icon>
        <p class="mt-5 f14">购物车</p>
      </router-link>
    </li>
    <li>
      <router-link to="/my" class="flex2 aic f20 gray" :class="{active: page==='my'}">
        <van-icon name="user-o"></van-icon>
        <p class="mt-5 f14">我的</p>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    page: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
.footer {
  border-top: 1px solid #ebebeb;
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
  bottom: 0;
}
.active {
  color: #ff5f16;
}
</style>
